<template>
    <div class="classlist">
        <div class="toptab">
            <router-link to="/home">
                <span class="iconfont icon-arrow-down-bold"></span>
            </router-link>
            <!-- icon-shezhi -->

            <h4>不背学堂</h4>
            <span></span>
        </div>

        <div class="bannerimg">
            <img src="../assets/img/classbanner.png" alt="" style="height: 133px;width: 346px;">
        </div>

        <div class="mainlist-one">
            <h3>精品课堂</h3>
            <div class="itmelist-one">
                <div class="one-item">
                    <img src="../assets/img/classimg1.png" alt="" style="width: 60px;height: 60px;">
                    <p>小野解词</p>
                    <span>词根词缀，图记单词</span>
                </div>

                <div class="one-item">
                    <img src="../assets/img/classimg2.png" alt="" style="width: 60px;height: 60px;">
                    <p>口语达人</p>
                    <span>地道口语特训课</span>
                </div>

                <div class="one-item">
                    <img src="../assets/img/classimg.png" alt="" style="width: 60px;height: 60px;">
                    <p>考研写作炼句</p>
                    <span>快速炼制高分金句</span>
                </div>
            </div>

        </div>


        <div class="mainlistbox">
            <div class="mainlist-two">
                <h3>学习攻略</h3>
                <div class="itemlist-two">
                    <div class="top">
                        <h4>高考备考</h4>
                        <span>共2篇<i class="iconfont icon-arrow-right-bold"></i></span>
                    </div>
                    <div class="itemmain">
                        <img src="../assets/img/classimg-two1.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>高考备考，四大法宝</h5>
                            <div>
                                <span class="texttitle">考义·考点·考频·考题</span>
                                <span class="textnum">2741.6k浏览</span>
                            </div>
                        </div>
                    </div>

                    <div class="itemmain">
                        <img src="../assets/img/classimg-two2.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>真题词组，高分必备</h5>
                            <div>
                                <span class="texttitle">关联学习，双倍收获</span>
                                <span class="textnum">5423.0k浏览</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mainlistbox" style="padding-bottom: 60px;">
            <div class="mainlist-two">
                <!-- <h3>精品课堂</h3> -->
                <div class="itemlist-two">
                    <div class="top">
                        <h4>玩转不背</h4>
                        <span>共4篇<i class="iconfont icon-arrow-right-bold"></i></span>
                    </div>
                    <div class="itemmain">
                        <img src="../assets/img/classimg-two3.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>语境学习法-新手必看</h5>
                            <div>
                                <span class="texttitle">单词不用背，融入语境自然会</span>
                                <span class="textnum">6043.7k浏览</span>
                            </div>
                        </div>
                    </div>

                    <div class="itemmain">
                        <img src="../assets/img/classimg-two4.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>常用搭配-例句绝配</h5>
                            <div>
                                <span class="texttitle">让你的英语正确而自然</span>
                                <span class="textnum">883.9k浏览</span>
                            </div>
                        </div>
                    </div>

                    <div class="itemmain">
                        <img src="../assets/img/classimg-two5.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>随身听-单词还能闭眼背</h5>
                            <div>
                                <span class="texttitle">碎片时间，随时听记</span>
                                <span class="textnum">2290.9k浏览</span>
                            </div>
                        </div>
                    </div>

                    <div class="itemmain">
                        <img src="../assets/img/classimg-two6.png" alt="" style="width: 54px;height: 54px;">
                        <div class="text">
                            <h5>句库-让好句子闪闪发光</h5>
                            <div>
                                <span class="texttitle">精听+跟读，一站提升听力口语</span>
                                <span class="textnum">616.7k浏览</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>





    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.classlist {
    background-color: #f4f4f4;
    // height: 100%;

    // padding: 0 14.5px;
    .toptab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        padding-bottom: 10px;
        // text-align: center;

        position: fixed;
        width: 100%;
        background-color: #f4f4f4;

        h4 {
            font-weight: 600;
            padding-right: 20px;
        }

        span {
            font-size: 20px;
            padding: 0 18px;
        }
    }

    .bannerimg {
        display: flex;
        justify-content: center;
        padding-top: 82px;

    }

    .mainlist-one {
        padding-top: 35px;

        h3 {
            padding: 0 14.5px;
            font-weight: 600;
        }

        .itmelist-one {
            padding: 0 14.5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 10px;

            .one-item {
                width: 165px;
                height: 130px;
                background-color: #fff;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin: 8px 0;

                p {
                    font-size: 14px;
                    color: #323232;
                    padding-top: 7px;

                }

                span {
                    font-size: 12px;
                    color: #a0a0a0;
                }
            }

        }

    }

    .mainlistbox {
        // padding-bottom: 40px;

        .mainlist-two {
            padding-top: 35px;

            h3 {
                padding: 0 14.5px;
                font-weight: 600;
                padding-bottom: 30px;
            }

            .itemlist-two {
                margin: 0 14.5px;
                padding: 15px 0px;
                background-color: #fff;
                border-radius: 15px;
                margin-bottom: 10px;

                .top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 5px 14.5px;
                    // padding-top: 20px;

                    h4 {
                        font-weight: 600;
                    }

                    span {
                        font-size: 12px;
                        font-weight: 600;

                        i {
                            font-size: 12px;
                        }
                    }
                }

                .itemmain {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    padding: 0 14.5px;

                    .text {
                        display: flex;
                        flex-direction: column;
                        padding: 0 10px;
                        width: 100%;

                        h5 {
                            font-weight: 500;
                            // margin-bottom: 10px;
                            // padding: 20px 0;
                        }

                        div {
                            display: flex;
                            justify-content: space-between;
                            font-size: 12px;
                            width: 100%;

                            .texttitle {
                                color: #808080;
                            }

                            .textnum {
                                color: #acacac;
                            }
                        }
                    }

                }
            }
        }
    }
}
</style>